<template>
    <div class="page">
        <topNav></topNav>
        <div class="workspace">
            <leftNav @childChangepyActive="ChangepyActive" :pyActives="pyActive"></leftNav>
            <div class="code-pannel">
                <keep-alive>
                    <router-view v-bind:pyActives="pyActive" class="editor-bar"/>
                </keep-alive>
            </div>
        </div>
    </div>
</template>

<script>
    import topNav from './pub/TopNav.vue'
    import leftNav from './pub/LeftNav.vue'
    export default {
        name: "Home",
        data(){
            //父组件data（文件名），用于子组件监听
            return {
                pyActive:'helloWorld'
            }
        },
        components:{
            topNav,
            leftNav
        },
        methods:{
            ChangepyActive:function(data){
                this.pyActive = data
            }
        }
    }
</script>

<style>
    body,html,.page{
        padding: 0;
        margin: 0;
        height: 100%;
    }
    body{
        overflow: hidden;
    }
    ul,ol{
        margin: 0;
        padding: 0;
    }
    ul li, ol li {
        list-style: none;
    }
    .code-pannel{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        position: relative;
    }
    .workspace{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
    }
    .ace-eclipse .ace_gutter{
        border: 0 !important;
    }

</style>
